import "./CitySelect.css";
import Header from "../../Share/Header";
import { getCityList } from "../../request/index";
import { useEffect, useState } from "react";
import { IndexBar, List, SearchBar } from "antd-mobile";
import { EnvironmentOutline } from "antd-mobile-icons";
import { getLocation, getSearch } from "../../request/index";
function CitySelect() {
  const [citylist, setCityList] = useState<any[]>([]);
  const [citylist1, setCityList1] = useState<any[]>([]);
  const [dq, setDq] = useState<any[]>([]);
  const [showbox, setShowBox] = useState(true);
  const [ss, setSs] = useState<any[]>([]);
  useEffect(() => {
    getCityList().then((res) => {
      // console.log(res);
      setCityList(res.data.data.hotCities);
      setCityList1(res.data.data.cityList);
    });
    getLocation().then((res) => {
      // console.log(res);
      setDq(res.data.city);
    });
  }, []);
  const onclick = (value: any) => {
    if (value === "") {
      setShowBox(true);
      return;
    } else {
      getSearch(value).then((res) => {
        // console.log(res);
        setSs(res.data.data);
        setShowBox(false);
      });
    }
  };
  return (
    <div>
      <Header title="城市选择"></Header>
      <SearchBar
        onChange={onclick}
        className="City-search"
        placeholder="北京/bei/jing"
      />
      <div style={{ display: showbox ? "none" : "block" }}>
        {ss.map((item) => {
          return (
            <>
              <p className="p">{item}</p>
            </>
          );
        })}
      </div>
      <div style={{ display: showbox ? "block" : "none" }}>
        <h5 style={{ margin: "5px 20px" }}>当前城市</h5>
        <div className="City-list">
          <div className="City-list1">
            {" "}
            <EnvironmentOutline style={{ color: "#0f0", fontSize: "20px" }} />
            {dq}
          </div>
          {citylist.map((item) => {
            return (
              <>
                <div className="City-list1"> {item.name}</div>
              </>
            );
          })}
        </div>
        {/* ------------------------------------------------------- */}
        <h5 style={{ margin: "5px 20px" }}>热门</h5>
        <div className="City-select">
          {/* <div className="City-list1"> */}
          <IndexBar className="AAA">
            {citylist1.map(({ title, citys }) => {
              return (
                <IndexBar.Panel
                  index={title}
                  title={`标题${title}`}
                  key={`标题${title}`}
                >
                  <List>
                    {citys &&
                      citys.map((item: any) => (
                        <List.Item key={item}>{item.name}</List.Item>
                      ))}
                  </List>
                </IndexBar.Panel>
              );
            })}
          </IndexBar>
          {/* </div> */}
        </div>
      </div>
    </div>
  );
}

export default CitySelect;
